<template>
    <div  class="classIndex">
        <ClassHeader></ClassHeader>
         <scoll   :scolli='scoindex' :datalist='TabArr'></scoll>
        <div class="routeDiv" @click='moni' @mousewheel="scrolldiv">
            <ocontent :datatitle='TabArr'></ocontent>

        </div>
       
    </div>
</template>

<script>
import ClassHeader from './components/header'
import scoll from './components/scoll'
import ocontent from './components/content'



export default {
    
    data(){
        return {
            TabArr:['新品','手机','电视','电脑',
            '家电','路由','智能','儿童','电源','耳机',
            '音响','礼品','生活','服务','米粉卡','零售店',],

            scoindex:0
        }

    },
    methods:{
        moni(){
            this.$router.push({name:'listdata'})
        },
     scrolldiv(e){
       let scollDiv=document.getElementsByClassName('routeDiv')[0];
        //  console.log(scollDiv);
        
        scollDiv.addEventListener('scroll', () => {
           let s=scollDiv.scrollTop;
           this.scoindex = Math.ceil(s/500);
        //    console.log(this.scoindex);
        }, false)


      
        //  console.log(e)
     }
  
    },
  
   
  
    components:{
        ClassHeader,
        // slideBar,
        scoll,
        ocontent
    }

}
</script>

<style lang='scss' scoped>
$appwidth:375;


@function pxtovw($p){
    @return (100/$appwidth*$p) * 1vw;
}


.routeDiv{
    margin-left: 20%;
    width: 80%;
    height: pxtovw(900);
    text-align: center;
    overflow: auto;
    margin-bottom:pxtovw(50);
    
}

</style>
